<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // 滚动页面会触发很多次
        // window.addEventListener('scroll',()=>{
        //     console.log('今天周五');
        // })

        // 通过定时器实现防抖   在频繁触发的方法中使用，
        // let timer = null;       //主要用来清除定时器
        // window.addEventListener('scroll', () => {
        //     // 页面滚动会先清除定时器   
        //     clearTimeout(timer)
        //     timer=setTimeout(()=>{
        //         // 在松手之后的一秒后触发，一般用作搜索使用,因为只有在停止搜索的时候才会在特定时间后执行定时器里的内容，
        //          手打的快的用户会觉得慢，卡，不顺畅，不过确实减小了服务器的压力，因为用户每敲一下就请求数据，浪费资源了
        //         console.log('今天周五');
        //     },1000)
        // })

        // 节流
        var flag = false;     //作为开关使用 ii 
        window.addEventListener('scroll', () => {
            if (flag == false) {
                flag = true;
                // 频繁触发的话，会在指定的时间结束之后触发
                setTimeout(() => {
                    flag = false
                    console.log('今天周五');
                }, 500)
            }
        })


    </script>
</body>
<style>
    body {
        height: 5000px;
    }
</style>

</html>